
.ring {
    width: 8em;
    height: 8em;
    position: relative;
    color:#2b65a5;
}
.warn{
    color:#e00808;
}
.ring .progress {
    position: absolute;
    width: 6em;
    height: 6em;
    background-color:  #f3f6fd;
    border-radius: 50%;
    left: 1em;
    top: 1em;
    line-height: 6em;
    text-align: center;
}

.ring .left,
.ring .right {
    width: 4em;
    height: 8em;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #cbd9dc
}

.warn .left,
.warn .right {
    width: 4em;
    height: 8em;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #f5d6d7
}

.ring .left {
    border-radius: 8em 0 0 8em;
}

.ring .right {
    border-radius: 0 8em 8em 0;
}

.ring .leftafter,
.ring .rightafter {
    content: "";
    position: absolute;
    display: block;
    width: 4em;
    height: 8em;
    background-color: #cbd9dc;
    border-radius: 8em 0 0 8em;
    background-color: #2b65a5;
}

.warn .leftafter,
.warn .rightafter {
    content: "";
    position: absolute;
    display: block;
    width: 4em;
    height: 8em;
    background-color: #f5d6d7;
    border-radius: 8em 0 0 8em;
    background-color: #e00808;
}

.ring .rightafter {
    content: "";
    position: absolute;
    display: block;
    border-radius: 0 8em 8em 0;
}
.ring .leftafter {
    transform-origin: right center;
}

.ring .rightafter {
    transform-origin: left center;
}
.ring .name{
    font-size:1.4em;
    width: 100%;
    position: absolute;
    text-align: center;
    top:-0.2em;
    left:0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ring .tips{
    font-size:0.8em;
    width: 100%;
    position: absolute;
    text-align: center;
    top:1.5em;
    left:0px;
}